<template>
  <!-- 清洗记录 -->
  <view class="rinseRecord">
    <view class="wrapper-content">
      <view
        class="wrapper-item"
        v-for="(item, i) in dataSource"
        :key="i"
        :data-url="`/rinseList/rinseRecord/rinseDetail?data=${encodeURIComponent(
          JSON.stringify(item)
        )}`"
        @click="handleClickRouter"
      >
        <view class="md">
          <view class="line-hidden name">
            <text
              class="timeout"
              :class="item.status == 1 ? 'onTime' : 'overdue'"
            >
              {{ item.status == 1 ? "按期清洗" : "逾期清洗" }}
            </text>
            {{ item.restaurantName }}
          </view>
          <view class="clause">
            餐厅地址：
            <text class="text-class">{{ item.restaurantAddress }}</text>
          </view>
          <view class="clause">
            餐厅规模：<text class="text-class">
              {{
                item.restaurantScale == 1
                  ? "小型"
                  : item.restaurantScale == 2
                  ? "中型"
                  : "大型"
              }}
            </text>
          </view>
        </view>
        <view class="down">
          <view>
            清洗日期：<text class="text-class">
              {{ formatters(item.cleanTime, "YY/MM/DD") }}
            </text>
          </view>
          <view style="display: flex"> 查看详情> </view>
        </view>
      </view>
      <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
    </view>

    <view v-if="!dataSource.length">
      <u-empty
        mode="list"
        text="暂无内容！"
        :icon="baseImgUrl + 'no-icon2.png'"
      >
      </u-empty>
    </view>
  </view>
</template>

<script>
import { cleanRecordPage } from "@/api/home.js";
import { handleClickRouter, formatters } from "@/utils/util.js";

export default {
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      dataSource: [],
      pageBottom: false,
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onLoad() {
    this.dataSource = [];
    this.pageConfig.pageNo = 1;
    this.getList();
  },
  onReachBottom() {
    let current = (this.pageConfig.pageNo += 1);
    let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
    if (current <= pages) {
      this.getList();
    }
  },
  methods: {
    handleClickRouter,
    formatters,
    getList() {
      let data = {
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };

      cleanRecordPage(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.rinseRecord {
  height: 100%;

  .wrapper-content {
    padding: 24rpx 16rpx 8rpx;
    background: #f9f9f9;
    // height: calc(100vh - 45px);

    .wrapper-item {
      margin-bottom: 20rpx;
      padding: 30rpx;
      background-color: #ffffff;

      .md {
        .name {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          margin-bottom: 17rpx;
        }

        .timeout {
          display: inline-block;
          margin-right: 8rpx;
          padding: 4rpx 14rpx;
          font-size: 26rpx;
          font-weight: 400;
          border-radius: 16rpx;
        }

        // 按期
        .onTime {
          color: #00c9ae;
          border: 1px solid #c4eee8;
          background: #f8fffe;
        }

        // 逾期
        .overdue {
          color: #f39835;
          border: 1px solid #ffd3a4;
          background: #fef4e9;
        }

        .clause {
          margin-bottom: 20rpx;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #a1a1a1;

          .text-class {
            color: #666666;
          }
        }
      }

      .down {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 26rpx;
        font-weight: 500;
        color: #a1a1a1;

        .text-class {
          color: #666666;
        }
      }
    }
  }
}
</style>
